<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/react.development.js"></script>
    <script type="text/javascript" src="js/react-dom.development.js"></script>
    <script type="text/javascript" src="js/babel.min.js"></script>
</head>
<body>
    <div id="root">
    
    </div>
    <script type="text/babel">
    // class定义类
        class Person{
            // constructor定义构造函数
            constructor(name,age) {
                this.name = name
                this.age = age
            }

            showName() {
                alert('我的名字是：' + this.name)
            }

            showAge() {
                alert('我的年龄是：' + this.age)
            }
        }

        // 记住要写new关键字实例化对象
        let Andy = new Person('ldh',66)

        Andy.showName();
        Andy.showAge();
        // alert一次只能输出一个变量，多个只输出第一个
        alert(Andy.name);
        alert(Andy.age);

        class Student extends Person{
            constructor(name,age,school) {
                // super调用父类的构造函数
                super(name, age)
                this.school = school
            }

            showSchool() {
                alert('我的学校是：' + this.school)
            }
        }

        let wwj = new Student('wwj',22,'qinghua');

        // alert(wwj.name,wwj.age,wwj.school);  错误示范
        alert(wwj.name);
        alert(wwj.age);
        alert(wwj.school);
        wwj.showName();
        wwj.showAge();
        wwj.showSchool();
     
    </script>
</body>
</html>